<template>
	<view>
		<!-- 自定义头部title -->
		<navbar :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight" :backshow='true' />
		<!-- 提示 -->
		<view class="safetips">请完善你的信息。</view>
		<!-- 完善信息box -->
		<view class="safebox">
			<uni-forms ref="customForm" :rules="customRules" :modelValue="user">
				<uni-forms-item :label="dlbs==1 ? '工号/学号/唯一识别码': '手机号' " required name=" id">
					<uni-easyinput v-model="user.id" :placeholder="dlbs==1 ? '请输入工号/学号/唯一识别码': '请输入手机号'" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="pwd">
					<uni-easyinput v-model="user.pwd" type="password" placeholder="6-16位的字母、数字组合" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit('customForm')" class="safesubmitbox">
				完成绑定
			</button>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/navbar/navbar.vue"; //这里就是在页面中引入组件路径的写法
	export default {
		components: {
			navbar, //这里是组件中name名称，在import引入的时候名称要一致
		},
		data() {
			return {
				dlbs: 1,
				user: {
					id: "",
					pwd: "",
				},
				customRules: {
					id: {
						rules: [{
							required: true,
							errorMessage: "工号/学号/唯一识别：",
						}, ],
					},
					pwd: {
						rules: [{
							required: true,
							errorMessage: "请输入6-16位的字母、数字组合",
						}, ],
					},
				},
				title: "安全中心",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
			};
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			this.dlbs = uni.getStorageSync('dlbs')
			console.log('当前登录标识', this.dlbs);
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules);
		},
		methods: {
			submit(ref) {
				// console.log(ref);
				// 成功跳转到用户首页

				// uni.switchTab({
				//   url: '/pages/home/home',
				//   success(res) {
				//     console.log('跳转成功', res);
				//   },
				//   fail(err) {
				//     console.error('跳转失败', err);
				//   }
				// });
				// 下面是校验
				this.$refs[ref]
					.validate()
					.then((res) => {
						// console.log("success", res);
						// uni.showToast({
						//   title: `校验通过`,
						// });
						// 开始请求
						// console.log('点击',this.user.id);
						uni.login({
							success: (res) => {

								this.$myRequest({
									url: "/appointment/login",
									method: "POST",
									data: {
										username: this.user.id,
										password: this.user.pwd,
										code: res.code
									},
								}).then((res) => {
									console.log('返回数据', res);

									if (res.code == 500) {
										uni.showToast({
											title: '账号或密码错误',
											icon: 'error',
										});
										// console.log('ss');
									}

									if (res.code == 200) {
										uni.showToast({
											title: `绑定成功`,
										});
										// 保存一下token
										uni.setStorageSync("token", res.data);
										// 如果不是则登录成功 并且记录token 进行跳转到首页
										uni.switchTab({
											url: "/pages/home/home",
											success(res) {
												console.log("跳转成功", res);
											},
											fail(err) {
												console.error("跳转失败", err);
											},
										});
									}
								}).catch((err) => {})

							}
						})

						// 请求结束

					})
					.catch((err) => {
						// uni.showToast({
						//   title:,
						// });
						console.log("err", err);
					});
			},
		},
	};
</script>

<style>
	@import "@/pages/safe/safe.css";
</style>